<template>
	<view class="ob-product-card" @click="handleClick">
		<!-- 商品图片 -->
		<view class="ob-product-card__image-wrapper">
			<image 
				:src="product.image" 
				class="ob-product-card__image" 
				:mode="imageMode"
				@error="handleImageError"
			></image>
			
			<!-- 活动标签 -->
			<view v-if="product.tags && product.tags.length > 0" class="ob-product-card__tags">
				<text 
					v-for="(tag, index) in product.tags" 
					:key="index" 
					class="ob-product-card__tag"
					:class="`ob-product-card__tag--${tag.type}`"
				>
					{{ tag.text }}
				</text>
			</view>
			
			<!-- 收藏按钮 -->
			<view v-if="showFavorite" class="ob-product-card__favorite" @click.stop="handleFavorite">
				<text class="ob-product-card__favorite-icon" :class="{ 'ob-product-card__favorite-icon--active': product.isFavorite }">
					{{ product.isFavorite ? '❤️' : '🤍' }}
				</text>
			</view>
		</view>
		
		<!-- 商品信息 -->
		<view class="ob-product-card__info">
			<!-- 商品名称 -->
			<text class="ob-product-card__name" :class="{ 'ob-product-card__name--ellipsis': nameEllipsis }">
				{{ product.name }}
			</text>
			
			<!-- 商品规格 -->
			<text v-if="product.spec" class="ob-product-card__spec">{{ product.spec }}</text>
			
			<!-- 价格行 -->
			<view class="ob-product-card__price-row">
				<text class="ob-product-card__price">{{ formatPrice(product.price) }}</text>
				<text v-if="product.originalPrice && product.originalPrice > product.price" class="ob-product-card__original-price">
					{{ formatPrice(product.originalPrice) }}
				</text>
			</view>
			
			<!-- 销量和评分 -->
			<view class="ob-product-card__meta">
				<text v-if="showSales && product.sales" class="ob-product-card__sales">
					已售{{ formatNumber(product.sales) }}
				</text>
				<view v-if="showRating && product.rating" class="ob-product-card__rating">
					<text class="ob-product-card__rating-star">⭐</text>
					<text class="ob-product-card__rating-value">{{ product.rating }}</text>
				</view>
			</view>
			
			<!-- 购买按钮 -->
			<view v-if="showBuyButton" class="ob-product-card__actions">
				<button class="ob-product-card__buy-btn" @click.stop="handleBuy">
					加入购物车
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import { formatPrice, formatNumber } from '../../utils/common.js'

const props = defineProps({
	// 商品数据
	product: {
		type: Object,
		required: true,
		default: () => ({})
	},
	// 图片模式
	imageMode: {
		type: String,
		default: 'aspectFill'
	},
	// 是否显示收藏按钮
	showFavorite: {
		type: Boolean,
		default: false
	},
	// 是否显示销量
	showSales: {
		type: Boolean,
		default: true
	},
	// 是否显示评分
	showRating: {
		type: Boolean,
		default: true
	},
	// 是否显示购买按钮
	showBuyButton: {
		type: Boolean,
		default: false
	},
	// 商品名称是否省略
	nameEllipsis: {
		type: Boolean,
		default: true
	}
})

const emit = defineEmits(['click', 'favorite', 'buy'])

// 事件处理
const handleClick = () => {
	emit('click', props.product)
}

const handleFavorite = () => {
	emit('favorite', props.product)
}

const handleBuy = () => {
	emit('buy', props.product)
}

const handleImageError = () => {
	console.log('图片加载失败:', props.product.image)
}
</script>

<style lang="scss" scoped>
.ob-product-card {
	background-color: var(--white);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	
	&__image-wrapper {
		position: relative;
		width: 100%;
		height: 120px;
		overflow: hidden;
	}
	
	&__image {
		width: 100%;
		height: 100%;
	}
	
	&__tags {
		position: absolute;
		top: 8px;
		left: 8px;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
	
	&__tag {
		padding: 2px 6px;
		border-radius: 4px;
		font-size: 10px;
		color: var(--white);
		line-height: 1.2;
		
		&--hot {
			background-color: #FF4757;
		}
		
		&--new {
			background-color: #2ED573;
		}
		
		&--sale {
			background-color: #FFA502;
		}
		
		&--recommend {
			background-color: #5352ED;
		}
	}
	
	&__favorite {
		position: absolute;
		top: 8px;
		right: 8px;
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 14px;
	}
	
	&__favorite-icon {
		font-size: 16px;
		transition: all 0.3s ease;
		
		&--active {
			transform: scale(1.2);
		}
	}
	
	&__info {
		padding: 12px;
	}
	
	&__name {
		font-size: 14px;
		color: var(--text-color);
		line-height: 1.4;
		margin-bottom: 4px;
		
		&--ellipsis {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	
	&__spec {
		font-size: 12px;
		color: var(--text-secondary);
		margin-bottom: 8px;
	}
	
	&__price-row {
		display: flex;
		align-items: baseline;
		gap: 8px;
		margin-bottom: 8px;
	}
	
	&__price {
		font-size: 16px;
		font-weight: 600;
		color: var(--primary-color);
	}
	
	&__original-price {
		font-size: 12px;
		color: var(--text-secondary);
		text-decoration: line-through;
	}
	
	&__meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12px;
	}
	
	&__sales {
		font-size: 12px;
		color: var(--text-secondary);
	}
	
	&__rating {
		display: flex;
		align-items: center;
		gap: 2px;
	}
	
	&__rating-star {
		font-size: 12px;
	}
	
	&__rating-value {
		font-size: 12px;
		color: var(--text-secondary);
	}
	
	&__actions {
		width: 100%;
	}
	
	&__buy-btn {
		width: 100%;
		height: 32px;
		background-color: var(--primary-color);
		color: var(--white);
		border: none;
		border-radius: 16px;
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		
		&::after {
			border: none;
		}
	}
}
</style>